<template>
  <div class="profile">
    <nav-bar class="profile-nav"><div slot="center">我的主页</div></nav-bar>
    <refresh v-show="isShow"></refresh>

    <scroll
      class="content"
      ref="scroll"
      :probe-type="3"
      :pull-up-load="true"
      @scroll="contentScroll"
    >
      <register @RegisetClick="RegisetClick" class="register"></register>
      <naviga-tion-item class="naviga"></naviga-tion-item>
      <railing class="railing"></railing>
      <order-form class="order"></order-form>
      <tool class="tool"></tool>
      <footnote class="footnote"></footnote>
      <goods-list :goods="recommends" class="goods"></goods-list>
    </scroll>

    <back-top @backClick="backClick" v-show="isShowBackTop"></back-top>
  </div>
</template>

<script>
import NavBar from "components/common/navbar/NavBar";
import Scroll from "components/common/scroll/Scroll.vue";
import Register from "components/common/register/Register.vue";
import NavigaTionItem from "./childComps/NavigaTionItem.vue";
import OrderForm from "./childComps/OrderForm.vue";
import Railing from "./childComps/Railing.vue";
import Footnote from "./childComps/Footnote.vue";
import Tool from "./childComps/Tool.vue";
import GoodsList from "components/content/goods/GoodsList.vue";
import { backTopMixin, itemListenermixin } from "common/mixin.js";

// import { debounce } from "common/utils.js";
import { getRecommend } from "network/detail.js";

export default {
  name: "Profile",
  components: {
    Scroll,
    Register,
    NavigaTionItem,
    OrderForm,
    Railing,
    Footnote,
    Tool,
    GoodsList,
    NavBar,
  },
  mixins: [backTopMixin, itemListenermixin],
  data() {
    return {
      recommends: [],
      isShowBackTop: false,
    };
  },
  created() {
    this.getRecommend();
  },
  mounted() {
    this.$refs.scroll.refresh();
    /*
    // const refresh = debounce(this.$refs.scroll.refresh, 100);

    // this.itemImgListener = () => {
    //   refresh();
    // };

    // this.$bus.$on("itemImageLoad", this.itemImgListener);
    */
    // 代替
    this.itemListenermixin;
  },
  activated() {
    this.$refs.scroll.refresh();
  },
  methods: {
    getRecommend() {
      getRecommend().then((res) => {
        console.log(res);
        this.recommends = res.data.list;
      });
    },

    contentScroll(position) {
      this.listenShowBackTop(position);
      this.topRefresh(position);
    },

    // 登出操作
    RegisetClick() {
      this.$confirm("此操作将退出账号, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          this.$message({
            type: "success",
            message: "退出成功!",
          });
          window.localStorage.removeItem("token");
          this.$router.push("/regisetr");
        })
        .catch(() => {
          // this.$message({
          //   type: "info",
          //   message: "已取消退出",
          // });
        });
    },
  },
};
</script>

<style scoped>
.profile-nav {
  background-color: var(--color-tint);

  color: white;
  font-size: 18px;
  font-weight: bold;
  letter-spacing: 3px;
}

.profile {
  height: 100vh;
  /* background-color: #f9f9f9; */
  background: url("../../assets/img/regisetr/login2.jpg");
}

.content {
  height: calc(100% - 93px);
  position: absolute;
  top: 44px;
  left: 0;
  right: 0;
  overflow: hidden;
  bottom: 49px;
}

.goods {
  background: none;
}

.register,
.naviga,
.order,
.tool {
  box-shadow: 4px 6px 10px #95a5a6;
  border-radius: 10px;
}
</style>
